<template>
    <div class="home" style="padding: 20px 25px">
        <!-- 头部 -->
        <div class="head" style="display: flex; flex-direction: row; justify-content: space-between">
            <div class="" style="padding: 2px 10px; text-align: center">
                <h1 style="margin: 20px 0; font-size: 38px; color: darkorange">
                    爱看剧
                </h1>
                <div style="line-height: 18px; color: #0bbdd4;">
                    <p class="">那些年陪伴我们成长的经典影视剧盘点</p>
                    <p class="">重温经典、重获喜悦与感动</p>
                </div>
            </div>

            <div class="" style="display: flex; align-items: center">
                <a-input-group>
                    <a-select v-model="selectedVcate" :style="{ width: '95px' }" placeholder="分类">
                        <a-option v-for="item of selectOptions" :value="item" :label="item.label" />
                    </a-select>
                    <!-- <a-input-search :style="{ width: '250px' }" placeholder="请输入搜索内容" @search="submitSearch"
                        search-button>
                        <template #button-icon>
                            <icon-search />
                        </template>
                    </a-input-search> -->
                    <a-input-search :style="{width:'250px'}" placeholder="请输入搜索内容" @search="submitSearch" />
                </a-input-group>
            </div>
        </div>

        <!-- 主内容 -->
        <div class="main" style="margin: 2% 0">
            <a-row justify="start" style="padding: 0 50px">
                <a-col class="link-card card-teleplay" :span="6" @click="goToTeleplay()">
                    <div style="width: 100%; text-align: center;">
                        <span class="link-card-name">电视剧</span>
                    </div>
                </a-col>
                <a-col class="link-card card-movie" :span="6" @click="goToMovie()">
                    <div style="width: 100%; text-align: center">
                        <span class="link-card-name">电影</span>
                    </div>
                </a-col>
                <a-col class="link-card card-animation" :span="6" @click="goToAnimation()">
                    <div style="width: 100%; text-align: center">
                        <span class="link-card-name">动漫</span>
                    </div>
                </a-col>
            </a-row>
        </div>
    </div>

</template>

<script>
    import { ref, defineComponent } from 'vue';
    import { useRouter } from 'vue-router';
    import { IconSearch } from '@arco-design/web-vue/es/icon';

    export default {
        components: {
            IconSearch,
        },
        setup() {
            const router = useRouter();

            const selectOptions = ref([{
                label: '电视剧',
                value: '1',
            }, {
                label: '电影',
                value: '2',
            }, {
                label: '动漫',
                value: '3',
            }]);

            // 选中的视频分类
            const selectedVcate = ref();

            // 搜索方法
            const submitSearch = (searchKeywords) => {
                if (!selectedVcate.value) {
                    return;
                }
                // 解构取得选中vcate的数字值
                let { value } = selectedVcate.value;
                if (value == '') {
                    return;
                }
                if (searchKeywords == '') {
                    return;
                }
                router.push({
                    path: '/search',
                    query: {
                        vcate: value,
                        keywords: searchKeywords
                    }
                });
            };


            const goToTeleplay = () => {
                router.push("/teleplay");
            };
            const goToMovie = () => {
                router.push("/movie");
            };
            const goToAnimation = () => {
                router.push("/animation");
            };
            const goToVariety = () => {
                router.push("/variety");
            };


            return {
                selectOptions,
                selectedVcate,
                submitSearch,

                goToTeleplay,
                goToMovie,
                goToAnimation,
                goToVariety,
            }
        },
    };

</script>

<style scoped>
    #search-box {
        font-family: "Microsoft YaHei";
        font-size: 14px;
    }

    input {
        border: 0.5px solid #bca5e6;
        height: 32px;
        float: left;
        background-repeat: no-repeat;
        background-size: 25px;
        background-position: 5px center;
        padding: 0 10px;
    }

    #search {
        width: 58px;
        height: 32px;
        float: right;
        background: #ff9800;
        color: white;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
    }


    .link-card:hover {
        cursor: pointer;
        transform: translateY(-5px);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .link-card {
        height: 220px;
        margin: 20px;
        display: flex;
        align-items: center;
        background-color: #9ec927;
        border-radius: 4px;
        transition: all 0.6s;
    }

    .card-teleplay {
        background-color: #9ec927;
    }

    .card-movie {
        background-color: #4e85e2;
    }

    .card-animation {
        background-color: #9e6aff;
    }

    .card-variety {
        background-color: #e9661b;
    }

    .link-card-name {
        color: #fff;
        font-size: 24px;
        font-weight: 400;
    }
</style>